<%--
  Created by IntelliJ IDEA.
  User: 59806
  Date: 2025/10/21
  Time: 15:42
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<html>
<head>
    <title>管理员列表</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta charset="utf-8">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/asserts/css/bootstrap.min.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/asserts/css/common.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/asserts/css/adminList.css">
    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
    <script src="${pageContext.request.contextPath}/asserts/js/bootstrap.min.js"></script>
    <script src="${pageContext.request.contextPath}/asserts/js/adminList.js"></script>
</head>
<body>
<%@ include file="../../asserts/common/header.jsp" %>

<div class="container admin-list-container">
    <h2 class="text-center page-title">管理员列表</h2>

    <table class="table table-bordered table-hover admin-table">
        <thead class="thead-light">
        <tr>
            <th style="width:15%">ID</th>
            <th style="width:20%">用户名</th>
            <th style="width:25%">姓名</th>
            <th style="width:20%">操作</th>
        </tr>
        </thead>
        <tbody>
        <c:forEach var="admin" items="${adminList}" varStatus="s">
            <tr>
                <td>${admin.id}</td>
                <td>${admin.userName}</td>
                <td>${admin.fullName}</td>
                <td>
                    <button class="btn btn-sm btn-info" data-toggle="collapse" data-target="#detail${s.index}">
                        展开详情
                    </button>
                </td>
            </tr>

            <tr id="detail${s.index}" class="collapse">
                <td colspan="4">
                    <div class="detail-card">
                        <div class="detail-info">
                            <p><strong>ID：</strong>${admin.id}</p>
                            <p><strong>用户名：</strong>${admin.userName}</p>
                            <p><strong>姓名：</strong>${admin.fullName}</p>
                            <p><strong>邮箱：</strong>${admin.email}</p>
                            <p><strong>电话：</strong>${admin.phoneNo}</p>
                        </div>

                        <div class="detail-actions">
                            <form method="post" action="<c:url value='/deleteAdmin'/>" class="inline-form">
                                <input type="hidden" name="userName" value="${admin.userName}">
                                <button type="submit" class="btn btn-danger btn-sm">删除</button>
                            </form>

                            <form method="post" action="<c:url value='/changeAdminPassword'/>" class="inline-form">
                                <input type="hidden" name="id" value="${admin.id}">
                                <input type="text" class="form-control input-sm new-password" placeholder="新密码" name="new_password">
                                <button type="submit" class="btn btn-warning btn-sm" onclick="changePassword()">修改密码</button>
                            </form>
                        </div>
                    </div>
                </td>
            </tr>
        </c:forEach>
        </tbody>
    </table>

    <!-- 分页 -->
    <div class="pagination-section text-center">
        <c:if test="${currentAdminPage>1}">
            <a href="?page=${currentAdminPage-1}" class="btn btn-outline-primary btn-sm">上一页</a>
        </c:if>
        <span class="page-info">第 ${currentAdminPage} 页 / 共 ${totalAdminPages} 页</span>
        <c:if test="${currentAdminPage<totalAdminPages}">
            <a href="?page=${currentAdminPage+1}" class="btn btn-outline-primary btn-sm">下一页</a>
        </c:if>
    </div>

    <hr>

    <!-- 添加管理员 -->
    <div class="add-admin-section">
        <h3 class="text-center">添加管理员</h3>
        <form method="post" action="<c:url value='/addAdmin'/>" class="admin-form">
            <div class="form-group">
                <label for="userName">用户名</label>
                <input type="text" class="form-control" id="userName" name="userName" placeholder="请输入用户名">
            </div>
            <div class="form-group">
                <label for="password">密码</label>
                <input type="password" class="form-control" id="password" name="password" placeholder="请输入密码">
            </div>
            <div class="form-group">
                <label for="fullName">全名</label>
                <input type="text" class="form-control" id="fullName" name="fullName" placeholder="请输入姓名">
            </div>
            <div class="form-group">
                <label for="email">邮箱</label>
                <input type="email" class="form-control" id="email" name="email" placeholder="请输入邮箱">
            </div>
            <div class="form-group">
                <label for="phoneNo">电话</label>
                <input type="text" class="form-control" id="phoneNo" name="phoneNo" placeholder="请输入电话号码">
            </div>
            <div class="text-center">
                <button type="submit" class="btn btn-success" onclick="add()">添加管理员</button>
            </div>
        </form>
    </div>
</div>
<script src="${pageContext.request.contextPath}/asserts/js/utils/dynamicBG.js"></script>
<%@ include file="../../asserts/common/footer.jsp" %>
</body>
</html>
